<template>
  <div class="container">
    <!--把子组件放到想放的位置-->
    <Vue-kline
      :klineParams="klineParams"
      :klineData="klineData"
      ref="callMethods"
      @refreshKlineData="refreshKlineData"
    ></Vue-kline>
  </div>
</template>

<script>
// import VueKline from "@/components/kline/kline.vue";
import VueKline from "vue-kline";
import {
  findDateDataByTrainingName,
  findWeekDataByTrainingName,
} from "@/api/transaction_api.js";
export default {
  components: {
    VueKline,
  },
  data() {
    return {
      /**
       * 训练名称
       */
      trainingName: null,
      klineParams: {
        width: 1400, // k线窗口宽
        height: 600, // k线窗口高
        theme: "dark", // 主题颜色
        language: "zh-cn", //语言
        ranges: ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"], // 聚合选项
        symbol: "BTC", // 交易代号
        symbolName: "BTC/USD", // 交易名称
        intervalTime: 5000, // k线更新周期 毫秒
        depthWidth: 50, // 深度图宽度
        count: 2, //显示指标数量 默认两个
      },
      klineData: {
        success: true,
        data: [],
      },
    };
  },
  mounted() {
    console.log("mounted");
    if (this.$route.query.name != undefined && this.$route.query.name != "") {
      this.trainingName = this.$route.query.name;
    }
    this.refreshKlineData(86400000);
  },
  methods: {
    /**
     * 根据name查询日线级别交易记录
     */
    findDateDataByTrainingName(name) {
      let that = this;
      findDateDataByTrainingName(name).then((res) => {
        that.klineParams.symbol = res.data.Result.Code;
        that.klineParams.symbolName = res.data.Result.Name;
        that.klineData.data.lines = res.data.Result.Lines;
        that.$refs.callMethods.kline.chartMgr
          .getChart()
          .updateDataAndDisplay(res.data.Result.Lines); //强制更改缓存中的lines值,防止显示不同步
        that.$refs.callMethods.setSymbol(res.data.Result.Code, res.data.Result.Code);
      });
    },
    /**
     * 根据name查询周线级别交易记录
     */
    findWeekDataByTrainingName(name) {
      let that = this;
      findWeekDataByTrainingName(name).then((res) => {
        that.klineParams.symbol = res.data.Result.Code;
        that.klineParams.symbolName = res.data.Result.Name;
        that.klineData.data.lines = res.data.Result.Lines;
        that.$refs.callMethods.kline.chartMgr
          .getChart()
          .updateDataAndDisplay(res.data.Result.Lines); //强制更改缓存中的lines值,防止显示不同步
      });
    },
    requestData() {},
    /**
     * 聚合时间改变时触发（k线的级别改变，如日线、周线、小时线）
     */
    refreshKlineData(option) {
      console.log("refreshKlineData");
      if (this.$route.query.name != undefined && this.$route.query.name != "") {
        this.trainingName = this.$route.query.name;
      }
      // 日线
      if (option === 86400000) {
        this.findDateDataByTrainingName(this.trainingName);
      }
      // 周线
      if (option === 604800000) {
        this.findWeekDataByTrainingName(this.trainingName);
      }
    },
    // 以下可根据使用场景调用内部自定制方法(如果不需要就不写)
    // this.$refs.callMethods.resize(int width, int height);
    // this.$refs.callMethods.setSymbol(string symbol, string symbolName)
    // this.$refs.callMethods.setTheme(string style);
    // this.$refs.callMethods.setLanguage(string lang);
    // this.$refs.callMethods.setIntervalTime(int intervalTime);
    // this.$refs.callMethods.setDepthWidth(int width);
    // this.$refs.callMethods.onRangeChange();
    // this.$refs.callMethods.redraw();
  },
};
</script>

<style></style>
